<template>
    <div class="home">
        <div class="top-seach">
            <div class="input-box">
                <span></span> <input type="text" />
            </div>
        </div>
        <div class="carousel">
            <carousel></carousel>
        </div>
        <div class="title">
            <span class="xian"></span>
            今日特价
            <span class="xian"></span>
            <span class="xing"></span>
        </div>
        <div class="contant">
            <ul>
                <li>
                    <div class="img"></div>
                    <div class="text">
                        <div class="top"><span class="name">空心菜</span><span class="money">¥2.00/500g</span></div>
                        <div class="bot">
                            <div class="t">优惠价 <br>¥5.00/500g</div>
                            <div class="t">市场价 <br>¥6.00/500g</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="tanceng" v-show="tanceng">
            <div class="contant">
                <div class="close" @click="closeTanceng"></div>
                <div class="ti">您当前选择的服务区域</div>
                <div class="text">河南省郑州市管城区航海路中州大道</div>
                <div class="btn">
                    <span class="left"  @click="closeTanceng">确定</span>
                    <span class="right">去修改</span>
                </div>
            </div>
        </div>
    </div>
</template>



<script>
import carousel from '../../../../commend/carousel/carousel'
export default {
    data(){
        return{
            tanceng:false
        }
    },
    methods:{
        closeTanceng:function(){
            this.tanceng = false;
        }
    },
    components:{
        carousel
    }
}
</script>

<style lang="less" rel="stylesheet/less">
.home{
    padding-top:0.88rem;
    padding-bottom:1.88rem;
   .top-seach{
       width:100%;
       height:0.88rem;
       position:fixed;
       top:0;
       left:0;
       z-index:11;
       background:#00D397;
       .input-box{
           width:90%;
           margin:0.14rem auto;
           background:#fff;
           height:0.6rem;
           display:flex;
           span{
               display:inline-block;
               width:0.6rem;
               height:0.6rem;
               background:url('seach.png') no-repeat;
               background-size:0.34rem 0.31rem;
               background-position: 0.18rem 0.14rem;
           }
           input{
               width:6.1rem;
               height:0.6rem;
               font-size:0.12rem;
               color:#9099A7;
           }
       }
   } 
   .carousel{
        width:100%;
        height:4.03rem;
        position:relative;
   }
   .title{
        width:100%;
        height:0.84rem;
        text-align:center;
        line-height:0.84rem;
        font-size: 0.26rem;
        color: #333333;
        letter-spacing: 0px;
        margin-top:0.2rem;
        position:relative;
        .xian{
            display:inline-block;
            width:30%;
            border-top:1px solid #CCCCCC;
            vertical-align: middle;
            margin:0 0.26rem;
        }
        .xing{
            width:0.27rem;
            height:0.33rem;
            background:url('xing.png') no-repeat;
            background-size:100% 100%;
            display:inline-block;
            position:absolute;
            top:0;
            left:50%;
            margin-left:0.5rem;
        }
   }
   .contant{
       width:100%;
       height:auto;
       ul{
           width:100%;
           height:auto;
           display:flex;
           flex-wrap: wrap;
           li{
                width:3.5rem;
                height:4.8rem;
                background: #FFFFFF;
                box-shadow: 0px 2px 4px 1px rgba(44,44,84,0.16);
                margin:0.2rem 0 0 0.2rem;
                .img{
                    width:100%;
                    height:3.5rem;
                }
                .text{
                    .top{
                        width:3.1rem;
                        margin:0.16rem auto;
                        display:flex;
                        justify-content: space-between;
                        span{
                            display:inline-block;
                            vertical-align: text-bottom;
                        }
                        .name{
                            font-size: 0.26rem;
                            color: #333333;
                        }
                        .money{
                            font-size: 0.32rem;
                            color: #FE5E5E;
                        }
                    }
                    .bot{
                        width:3.1rem;
                        margin:0.15rem auto;
                        display:flex;
                        justify-content: space-between;
                        .t{
                            font-size: 0.2rem;
                            color: #999999;
                            line-height: 0.3rem;
                        }
                    }
                }
           }
       }
   }
   .tanceng{
        width:100%;
        height:100%;
        position:fixed;
        z-index:100;
        left:0;
        top:0;
        background:rgba(0,0,0,0.3);
        .contant{
            width:5rem;
            height:3rem;
            margin:auto;
            background: #FFFFFF;
            border-radius: 12px;
            position:absolute;
            left:0;
            top:0;
            right:0;
            bottom:0;
            .close{
                width:0.38rem;
                height:0.38rem;
                background:url('close.png') no-repeat;
                background-size:100% 100%;
                position:absolute;
                right:0.22rem;
                top:0.13rem;
            }
            .ti{
                height:auto;
                text-align:center;
                margin-top:0.4rem;
                font-size: 0.28rem;
                color: #999999;
            }
            .text{
                width:80%;
                height:auto;
                margin:0.3rem auto;
                font-size: 0.26rem;
                color: #666666;
                line-height:0.3rem;
            }
            .btn{
                width:100%;
                height:1rem;
                line-height:1rem;
                font-size: 0.32rem;
                color: #7FB80E;
                display:flex;
                span{
                    display:inline-block;
                    width:50%;
                    text-align:center;
                }
            }
        }
    }
}

</style>

